<template>
  <div class="x-input">
    <input :class="inputClass" ref="input" type="text"
      :value="value"
      :style="{color: color}"
      @input="updateValue($event)"
      :placeholder="placeholder">
  </div>
</template>

<script>
  export default {
    props: {
      color: {
        type: String,
        default: '#353038'
      },
      uiClass: {
        type: String,
        default: ''
      },
      onChange: {
        type: Function
      },
      placeholder: {
        type: String,
        default: ''
      }
    },
    data() {
      return {
        value: '',
        inputClass: {}
      }
    },
    mounted() {
      let uiClassObject = {}
      if(this.uiClass) {
        const uiClassArr = this.uiClass.split(' ')
        uiClassArr.forEach(c => {
          uiClassObject[c] = true
        })
      }

      this.inputClass = Object.assign({}, {
        'x-input__input': true
      }, uiClassObject);
    },
    methods: {
      updateValue(e) {
        this.value = e.target.value.trim()
        this.onChange(this.value)
      }
    }
  }
</script>

<style lang="scss" scoped>
  .x-input__input {
    width: 100%;
    font-size: 16px;
    border: 0 none;
    padding: 18px 12px 16px 12px;
    border-bottom: 1px #a5a5a5 solid;
    transition: all .3s;
    box-sizing: border-box;
    background: transparent;
    &:focus {
      outline: 0 none;
      border-bottom-color: #9a9a9a;
      transition: all .3s;
    }
  }
</style>
